<template>
  <div>
    <div v-show="!identity" class="main">你没有该权限！！！</div>
    <div class="app-container" v-show="identity">
      <el-card class="top">
        <el-form>
          <el-form-item label="班级验证码:">
            <el-row :gutter="20">
              <el-col :span="4">
                <div class="notice" v-if="showPasswordInput == false">
                  请及时设置进班验证码!
                </div>
                <el-input
                  class="enterpriseName"
                  v-model="password"
                  :type="pwdType"
                  auto-complete="off"
                  :disabled="disabledPassword"
                  v-if="showPasswordInput == true"
                >
                  <svg-icon
                    v-show="password != ''"
                    :icon-class="eyeType"
                    slot="suffix"
                    class="el-input__icon input-icon"
                    @click="changeType()"
                  />
                </el-input>
              </el-col>
              <el-col :span="1.5">
                <el-button
                  type="primary"
                  v-show="!showPassword"
                  @click="editBtn"
                  style="width: 230%"
                  >编辑</el-button
                >
              </el-col>

              <el-col :span="1.5">
                <el-button type="primary" v-show="showPassword" @click="saveBtn"
                  ><div v-show="button">修改</div>
                  <div v-show="!button">保存</div></el-button
                >
              </el-col>
              <el-col :span="1.5">
                <el-button type="warning" v-show="showPassword" @click="quitBtn"
                  >取消</el-button
                >
              </el-col>
              <el-col :span="1.5">
                <el-button
                  type="danger"
                  v-show="button && showPassword"
                  @click="delBtn"
                  >删除验证码</el-button
                >
              </el-col>
              <!-- <el-col :span="2">
                {{ className }}
              </el-col> -->
              <div class="title">{{ className }}</div>
            </el-row>
          </el-form-item>
        </el-form>
      </el-card>
      <el-card>
        <el-form
          :model="queryParams"
          ref="queryForm"
          size="small"
          :inline="true"
          v-show="showSearch"
          label-width="68px"
        >
          <el-form-item label="老师姓名" prop="userName">
            <el-input
              v-model="queryParams.userName"
              placeholder="请输入老师姓名"
              clearable
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-form-item label="老师昵称" prop="nickName">
            <el-input
              v-model="queryParams.nickName"
              placeholder="请输入老师昵称"
              clearable
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              icon="el-icon-search"
              size="mini"
              @click="handleQuery"
              >搜索</el-button
            >
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
              >重置</el-button
            >
          </el-form-item>
        </el-form>
        <el-row :gutter="10" class="mb8">
          <el-col :span="1.5">
            <el-button
              type="info"
              icon="el-icon-s-comment"
              size="mini"
              @click="handleMsg"
              v-hasPermi="['tab:classMembers:Msg']"
              >发送消息</el-button
            >
          </el-col>

          <right-toolbar
            :showSearch.sync="showSearch"
            @queryTable="getList"
          ></right-toolbar>
        </el-row>
        <el-table
          v-loading="loading"
          :data="classTeachersList"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55" align="center" />
          <el-table-column
            label="序号"
            type="index"
            :index="table_index"
            width="50"
            align="center"
          >
          </el-table-column>
          <el-table-column
            label="老师头像"
            align="center"
            prop="avatar"
            width="100"
          >
            <template slot-scope="scope">
              <image-preview :src="scope.row.avatar" :width="50" :height="50" />
            </template>
          </el-table-column>
          <el-table-column label="学科" align="center" prop="remark" />
          <el-table-column label="老师姓名" align="center" prop="userName" />
          <el-table-column label="老师昵称" align="center" prop="nickName" />
          <el-table-column label="老师年龄" align="center" prop="age" />
          <el-table-column label="老师电话" align="center" prop="phonenumber" />
          <el-table-column label="老师邮箱" align="center" prop="email" />
          <el-table-column
            label="操作"
            align="center"
            class-name="small-padding fixed-width"
          >
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                icon="el-icon-s-comment"
                @click="handleMsg(scope.row)"
                >发送消息</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <pagination
          v-show="total > 0"
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getList"
        />
      </el-card>

      <el-dialog
        :title="title"
        :visible.sync="openMsg"
        width="780px"
        append-to-body
        align="center"
      >
        <el-form ref="form" :model="form" :rules="rules" label-width="80px">
          <el-row>
            <el-row :span="24">
              <el-form-item label="接收人" v-show="show">
                <div style="text-align: center; margin-bottom: 20px">
                  <el-transfer
                    style="text-align: left; display: inline-block"
                    v-model="classUserId"
                    filterable
                    :left-default-checked="leftChecked"
                    :right-default-checked="rightChecked"
                    :render-content="renderFunc"
                    :titles="['未选择', '已选择']"
                    :button-texts="['移除', '添加']"
                    :format="{
                      noChecked: '${total}',
                      hasChecked: '${checked}/${total}',
                    }"
                    @change="handleChange"
                    :data="classUserName"
                  >
                  </el-transfer>
                </div>
              </el-form-item>
            </el-row>
            <el-col :span="24">
              <el-form-item label="消息标题" prop="msgTitle">
                <el-input
                  v-model="form.msgTitle"
                  placeholder="请输入消息标题"
                />
              </el-form-item>
            </el-col>
            >
            <el-col :span="24">
              <el-form-item label="消息内容" prop="msgContent">
                <editor
                  v-model="form.msgContent"
                  :min-height="192"
                  @blur="contentRule"
                />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="submitFormMsg">确 定</el-button>
          <el-button @click="cancelMsg">取 消</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { classIdentity } from "@/api/tab/class";
import {
  classTeachers,
  getClassPassword,
  updateClassPassword,
  getClassName,
} from "@/api/tab/classMemebers";

import { addMsg } from "@/api/message/message";
export default {
  data() {
    return {
      button: undefined,
      password: undefined,
      showPassword: undefined,
      showPasswordInput: undefined,
      disabledPassword: undefined,
      pwdType: "password",
      eyeType: "eye",
      // 按钮loading
      buttonLoading: false,
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 显示搜索条件
      showSearch: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        userName: undefined,
        nickName: undefined,
      },
      // 总条数
      total: 0,
      title: "",
      // 班级家长的管理表格数据
      classTeachersList: [],
      // 弹出层标题
      openMsg: false,
      // 表单参数
      form: {},
      //家长名称
      classUserName: [],
      //左边默认选中
      leftChecked: [],
      //右边默认选中
      rightChecked: [],
      classUserIdAll: [],
      //数组值v-model
      classUserId: [],
      className: "",
      show: true,
      identity: false,
      renderFunc(h, option) {
        return (
          <span>
            {option.label.split(",")[0]}-{option.label.split(",")[1]}
          </span>
        );
      },
      // 表单校验
      rules: {
        msgTitle: [
          { required: true, message: "消息标题不能为空", trigger: "blur" },
        ],
        msgContent: [
          { required: true, message: "消息内容不能为空", trigger: "blur" },
        ],
      },
    };
  },
  mounted() {
    this.classIdentity();
    this.getList();
    setTimeout(() => {
      this.get();
    }, 100);
    this.getClassPassword();
    this.getClassName();
  },
  methods: {
    classIdentity() {
      classIdentity().then((respnse) => {
        if (respnse) {
          this.identity = true;
        } else {
          this.identity = false;
        }
      });
    },
    changeType() {
      this.pwdType = this.pwdType === "password" ? "text" : "password";
      this.eyeType = this.eyeType === "eye" ? "eye-open" : "eye";
    },
    //编辑
    editBtn() {
      this.disabledPassword = false;
      this.showPassword = true;
      this.showPasswordInput = true;
      if (this.password == "") {
        this.button = false;
      } else {
        this.button = true;
      }
    },
    //保存
    saveBtn() {
      let that = this;
      if (this.password == "") {
        return that.$modal.msgError("验证码不能为空");
      }
      this.$modal
        .confirm("是否确认修改班级验证码？")
        .then(function () {
          updateClassPassword(that.password).then((res) => {
            if (res.msg == "验证码与原验证码重复") {
              that.$modal.msgError(res.msg);
            } else if (res.msg == "修改班级验证码成功") {
              that.$modal.msgSuccess(res.msg);
            } else {
              that.$modal.msgError("系统错误，请联系管理员");
            }
          });
        })
        .then(() => {
          that.pwdType = "password";
          that.eyeType = "eye";
          that.showPassword = false;
          that.disabledPassword = true;
          if (this.password == "") {
            this.showPasswordInput = false;
          } else {
            this.showPasswordInput = true;
          }
        });
    },
    //删除验证码
    delBtn() {
      let that = this;

      this.$modal
        .confirm("是否确认删除班级验证码？")
        .then(function () {
          updateClassPassword(null).then((res) => {
            that.$modal.msgSuccess("删除班级验证码成功");
          });
        })
        .then(() => {
          that.pwdType = "password";
          that.eyeType = "eye";
          that.showPassword = false;
          that.disabledPassword = true;
          this.getClassPassword();
          if (this.password == "") {
            this.showPasswordInput = false;
          } else {
            this.showPasswordInput = true;
          }
        });
    },
    //取消
    quitBtn() {
      this.showPassword = false;
      this.getClassPassword();
      this.pwdType = "password";
      this.eyeType = "eye";
      this.disabledPassword = true;
      if (this.password == "") {
        this.showPasswordInput = false;
      } else {
        this.showPasswordInput = true;
      }
    },
    // 富文本校验
    contentRule() {
      this.$refs.addModelRef.validateField("msgContent");
    },
    //获取班级名称
    getClassName() {
      classIdentity().then((response) => {
        if (response) {
          getClassName().then((res) => {
            this.className = res;
          });
        }
      });
    },
    //获取班级密码
    getClassPassword() {
      classIdentity().then((response) => {
        if (response) {
          getClassPassword().then((res) => {
            this.password = res;
            if (this.password == "") {
              this.showPasswordInput = false;
            } else {
              this.showPasswordInput = true;
            }
          });
        }
      });
    },
    //初始化获取班级全部家长数据
    getList() {
      this.loading = true;
      classIdentity().then((res) => {
        if (res) {
          classTeachers(this.queryParams).then((response) => {
            this.classTeachersList = response.rows;
            this.total = response.total;
            this.loading = false;
            console.log(response);
          });
        }
      });
    },
    //获取全部老师真实姓名和昵称
    get() {
      this.loading = true;
      classIdentity().then((res) => {
        if (res) {
          classTeachers({ pageNum: 1, pageSize: 30 }).then((response) => {
            this.loading = false;
            let { classUserName, classUserIdAll } = this;
            response.rows.forEach((item) => {
              classUserName.push({
                key: item.userId,
                label: item.userName + "," + item.nickName,
                disabled: false,
              });
              classUserIdAll.push(item.userId);
            });
          });
        }
      });
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map((item) => item.userId);
      this.single = selection.length != 1;
      this.multiple = !selection.length;
    },
    //序号换页问题
    table_index(index) {
      return (
        (this.queryParams.pageNum - 1) * this.queryParams.pageSize + index + 1
      );
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /* 菜单重置 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    /* 发送班级消息 */
    handleMsg(row) {
      // console.log(row.userId);
      const userIds = row.userId || this.ids;
      this.openMsg = true;
      this.title = "班级消息";
      // console.log(userIds.length);
      if (userIds.length == 0) {
        this.show = true;
        this.classUserId = this.classUserIdAll;
      } else {
        if (row.userId != undefined) {
          this.classUserId = [];
          this.show = false;
          this.classUserId.push(userIds);
          this.title = "私人消息";
        } else {
          this.show = true;
          this.classUserId = userIds;
        }
      }
    },

    // 表单重置
    reset() {
      this.form = {};
      this.resetForm("form");
    },
    submitFormMsg() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          if (this.classUserId.length == 0) {
            this.$modal.msgError("请选择接收人");
          } else {
            this.form.msgStatus = 2;
            addMsg(this.form, this.classUserId).then((response) => {
              this.$modal.msgSuccess("发送班级消息成功");
              this.openMsg = false;
              this.reset();
            });
          }
        }
      });
    },
    // 取消按钮
    cancelMsg() {
      this.openMsg = false;
      this.reset();
    },
    handleChange(value) {
      this.classUserId = value;
    },
  },
};
</script>

<style lang="scss" scoped>
input {
  outline-style: none;
  border: 1px solid #ccc;
  border-radius: 3px;
  padding: 13px 14px;
  width: 620px;
  font-size: 14px;
  font-weight: 700;
  font-family: "Microsoft soft";
}
::v-deep .enterpriseName .el-input__inner:focus {
  border-color: #66afe9;
  outline: 0;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075),
    0 0 8px rgba(102, 175, 233, 0.6);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075),
    0 0 8px rgba(102, 175, 233, 0.6);
}
//使用 /deep/
::v-deep .enterpriseName .el-input__inner {
  outline-style: none;
  border: 1px solid #ccc;
  border-radius: 3px;
  padding: 13px 14px;
  font-size: 14px;
  font-weight: 700;
  font-family: "Microsoft soft";
}
.el-input__icon {
  margin-top: 10px;
}
.notice {
  color: red;
  display: block;
  font-size: 20px;
  font-weight: bold;
}
.main {
  text-align: center; /*让div内部文字居中*/
  background-color: #fff;
  border-radius: 20px;
  width: 400px;
  height: 350px;
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  font-weight: bold;
  font-size: 40px;
}
.title {
  text-align: center;
  display: block;
  font-weight: bold;
}
</style>